import React from 'react';
import ajax from 'superagent';

import Nav from '../../components/nav/Nav';
import Banner from '../../components/banner/Banner';
import Echart from '../../components/echart/Echart';

import Statistical from '../../components/statistical/Statistical';
import Comments from '../../components/comments/Comments';
import CommentsInput from '../../components/commentsInput/CommentsInput';


class Athlete extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Athlete';
        this.state = {
            data:"",
            banner: {
                id: "",
                name: "",
                club: "",
                imgSrc: "",
                rank: "11",
                goalsSum: "",
                goalsCurrent: "16"
            },
            echart: {
                control: "0",
                // 射门
                goals: "0",
                power: "0",
                // 防守
                defense: "0",
                speed: "0",
            },
            fiveSeason: [],
            season: {
                average: [],
                sum: []
            },
            info: {
                name: '顾阳',
                club: '沈阳第一'
            },
            name: '顾阳晨',
        }
    }


    componentWillMount (){
        let id = "1";
        ajax.get(`api/players/get/${id}/`)
            .end((error, response) => {
                if( !error && response ) {
                    let data = response.body;
                    console.log( "********************** " );
                    console.log( "Athlete component Will Mount " );
                    console.log(data );
                    let currentFive = [];
                    //  最近5场比赛的数据
                    data.get_recent_five_matches.map(function( fiveMatch, index ){
                        let matchTeam = data.team== fiveMatch.match.team_1? fiveMatch.match.team_2: fiveMatch.match.team_1;

                        let passData = {
                            date: fiveMatch.match.match_date,
                            vs: data.team== fiveMatch.match.team_1? fiveMatch.match.team_2: fiveMatch.match.team_1,

                            attack: fiveMatch.attack_times,
                            defense: fiveMatch.defense_times,
                            average: fiveMatch.score
                        }
                        currentFive.push(passData );
                    });

                    currentFive.push({
                        date: "平均",
                        vs: "",

                        attack: data.recent_matches_analysis.average_attack,
                        defense: data.recent_matches_analysis.average_defense,
                        average: data.recent_matches_analysis.average_score
                    },{
                        date: "总计",
                        // vs: matchTeam
                        vs: "",

                        attack: data.recent_matches_analysis.sum_attack,
                        defense: data.recent_matches_analysis.sum_defense,
                        average: data.recent_matches_analysis.sum_score

                    });

                    this.setState({
                        name: data.chinese_name,
                        banner: {
                            id: data.id,
                            name: data.chinese_name,
                            club: data.team,
                            imgSrc: data.images,
                            rank: data.ranking,
                            goalsSum: data.total_goals,
                            goalsCurrent: data.current_season_goals
                        },
                        echart: {
                            control: data.control,
                            // 射门
                            goals: data.total_goals,
                            power: data.power,
                            // 防守
                            defense: data.defense_times,
                            speed: data.speed,
                        },
                        season :{
                            average: [{
                                year: data.get_seasons_data.season_name,
                                club:data.team,
                                num: data.get_seasons_data.num,
                                attack: data.get_seasons_data.average_attack,
                                defense: data.get_seasons_data.average_defense,
                                average: data.get_seasons_data.average_score
                            }],
                            sum: [{
                                year: data.get_seasons_data.season_name,
                                club: data.team,
                                num: data.get_seasons_data.num,
                                attack: data.get_seasons_data.sum_attack,
                                defense: data.get_seasons_data.sum_defense,
                                average: data.get_seasons_data.sum_score
                            }],
                        },
                        fiveSeason: currentFive
                    });
                    console.log(response.body);
                } else {
                    console.error(`Error fetching ${name} `, error);
             }
        });
    }


    //  window.scroll 时 通过 函数来传递 nav 应该的位置，从而控制cnav 中 nav 的位置
    passNavPosition ( position ) {
        console.log("****************");
        console.log( "passNavPosition" );
        console.log( position );
        this.setState({
            navPosition: position
        });
    }

    render() {
        return (
            <div>
                <Nav mode="snav" name={this.state.name} />
                <Banner mode="athlete" data= {this.state.banner} />
                <section className="scroll echart" >
                    <Echart  mode="athlete" athleteDatas = {this.state.echart}/>
                </section>
                <section className="scroll" >
                    <Statistical mode="season" yellowTitle="赛季平均" data={this.state.season.average} />
                    <Statistical mode="season" yellowTitle="赛季总计" data={this.state.season.sum} />
                </section >
                <section className="scroll" >
                    <Statistical mode="five" data={this.state.fiveSeason }/>
                </section>
                <section className="scroll" >
                    <Comments />
                    <CommentsInput />
                </section>
            </div>

        );
    }
}

export default Athlete;
